<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018/5/10
  Time: 14:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="common/tag.jsp"%>
<html>
<head>
    <title>TCP/UDO监控</title>
    <%@include file="common/head.jsp" %>
</head>
<body>
<div id="chartmain" style="width: 600px; height: 400px;"></div>
</body>
<script type="text/javascript">
    //初始化echarts实例

    var myChart = echarts.init(document.getElementById('chartmain'));
    //chushihua(myChart);
    fuzhi(myChart);
    //每隔3秒执行一次timelyFun方法
    window.setInterval("fuzhi(myChart)",3000);

    function fuzhi(myChart){
        $.ajax({
            contentType : "application/json",
            type : "GET",
            url : "/ipSort/ipTcpUdpInfo",
            dataType : "json",
            success : function(data) {
                //创建一个数组，用来装对象传给series.data，因为series.data里面不能直接鞋for循环
                var servicedata=[];
                var serviceName=[];
                for(var i=0;i<data.length;i++){
                    var obj=new Object();
                    obj.name=data[i].ip;
                    obj.value=data[i].value;
                    servicedata[i]=obj;
                    serviceName[i]=obj.name;
                }
                myChart.setOption({
                    title : {
                        text: 'TCP/UDP监控',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        x : 'center',
                        y : 'bottom',
                        data:serviceName
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    series : [

                        {
                            name:'面积模式',
                            type:'pie',
                            radius : [20, 60],
                            center : ['45%', 150],
                            roseType : 'area',
                            x: '50%',               // for funnel
                            max: 40,                // for funnel
                            sort : 'ascending',     // for funnel
                            data:servicedata,
                        }
                    ]

                });

            }
        });
    }
</script>
</html>

